<template>
  <div class="total-nav van-hairline--bottom">
    <!-- <router-link to="/merchant"> -->
    <ul class="home-nav">
      <li
        class="five-star-hotel"
        :key="index"
        v-for="(item, index) in navList"
        @click="handleNavSwitch(item)"
      >
        <router-link :to="item.url">
          <img :src="item.hotelIcon" alt class="hotelIcon" />
          <p class="describe">{{ item.title }}</p>
        </router-link>
      </li>
    </ul>
    <!-- </router-link> -->
    <div></div>
  </div>
</template>

<script>
export default {
  name: "homeNav",
  data() {
    return {
      navList: [
        {
          id: "001",
          title: "酒店",
          url: "/merchant/hotela",
          hotelIcon:
            "https://staticnew.mayi.com/duanzu/resourcesWap/index/images/zkzq.png"
        },
        {
          id: "002",
          title: "宾馆",
          url: "/merchant/hotelb",
          hotelIcon:
            "https://staticnew.mayi.com/duanzu/resourcesWap/index/images/zkzq.png"
        },
        {
          id: "003",
          title: "旅馆",
          url: "/merchant/hotelc",
          hotelIcon:
            "https://staticnew.mayi.com/duanzu/resourcesWap/index/images/zkzq.png"
        },
        {
          id: "004",
          title: "民宿",
          url: "/merchant/hoteld",
          hotelIcon:
            "https://staticnew.mayi.com/duanzu/resourcesWap/index/images/zkzq.png"
        }
      ]
    };
  },
  methods: {
    handleNavSwitch(item) {
      console.log(item.title);
      this.$emit("change", item.title);
    }
  }
};
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/varibles.styl';

.total-nav {
  height: 2.4rem;
}

.home-nav {
  height: 100%;
  box-sizing: border-box;
  display: flex;
  padding-top: 0.36rem;
  text-align: center;

  .five-star-hotel {
    flex: 1;
    height: 100%;
    vertical-align: middle;

    .hotelIcon {
      width: 50%;
    }

    .describe {
      color: #000;
      line-height: 0.8rem;
    }
  }
}
</style>
